<template>
  <div
    class="test-account-container animate__faster animate__animated animate__fadeIn"
  >
    <!-- 顶部条件筛选 -->
    <div class="screen-conditions-container">
      <ScreenConditions :isDataType="false">
        <template slot="conditions">
          <AssociativeSelectGroup
            :map="selectMap"
            :activeDate="activeDate"
            @conditionChange="selectGroupChange($event)"
          >
            <template slot="space_0">
              <topSelect ref="selectChild" :trialNum="parentNum"></topSelect>
            </template>
          </AssociativeSelectGroup>
        </template>
        <template slot="operate">
          <a-button type="primary" @click="getTableData()"> 查询 </a-button>
        </template>
      </ScreenConditions>
    </div>
    <div
      class="test-account-body animate__faster animate__animated animate__fadeIn"
      v-loading="loading"
    >
      <div class="data-report-body">
        <div
          class="test-menu"
          :class="{ 'animate-in': isOpen, 'animate-out': !isOpen }"
        >
          <div class="zhgd-data-report-header" header="试验项目"></div>
          <div class="video-menu-tree">
            <a-empty v-if="treeData.length == 0" />
            <a-tree
              v-else
              blockNode
              show-icon
              v-model="checkedKeys"
              :expanded-keys="expandedKeys"
              :auto-expand-parent="autoExpandParent"
              :selected-keys="selectedKeys"
              :tree-data="treeData"
              :replaceFields="{
                children: 'children',
                title: 'trialName',
                key: 'trialNum',
              }"
              @expand="onExpand"
              @select="onSelect"
            >
              <template slot="custom" slot-scope="{ children }">
                <img
                  v-if="children && children.length > 0"
                  class="menu-icon"
                  src="https://jszhgd.cn/static/pc/folder.png"
                />
                <img
                  v-else
                  class="menu-icon"
                  src="https://jszhgd.cn/static/pc/file.png"
                />
              </template>
            </a-tree>
          </div>
          <img
            class="arrow"
            :src="
              isOpen
                ? `${assets_host}` + '/pc/trial/close.png'
                : `${assets_host}` + '/pc/trial/open.png'
            "
            alt=""
            @click="isOpen = !isOpen"
          />
        </div>
        <div class="table-body">
          <!-- <div class="zhgd-data-report-header" header="检测台账"></div> -->
          <div class="table-warp-body">
            <div class="table-body">
              <vxe-table
                height="99%"
                class="scrollbarStyle"
                align="center"
                :data="tableData"
                :column-config="{ resizable: true }"
              >
                <vxe-column type="seq" width="80" title="序号"></vxe-column>
                <vxe-column
                  field="trialDate"
                  title="检测时间"
                  min-width="150"
                ></vxe-column>
                <vxe-column
                  field="trialName"
                  title="试验项目"
                  min-width="150"
                ></vxe-column>
                <vxe-column
                  field="curingAge"
                  title="养护龄期"
                  width="120"
                ></vxe-column>
                <vxe-column
                  field="standardValue"
                  title="技术指标"
                  min-width="150"
                ></vxe-column>
                <vxe-column field="state" title="试验状态" min-width="150">
                  <template #default="{ row }">
                    <div class="result result-no" v-if="row.state == -1">
                      已作废
                    </div>
                    <div class="result result-ok" v-else>已试验</div>
                  </template>
                </vxe-column>
                <vxe-column
                  field="testValue"
                  title="实测结果"
                  min-width="150"
                ></vxe-column>
                <vxe-column field="result" title="结果判定" width="120">
                  <template #default="{ row }">
                    <div class="result result-ok" v-if="row.result == 0">
                      合格
                    </div>
                    <div class="result result-no" v-if="row.result == 1">
                      不合格
                    </div>
                    <div class="result result-invalid" v-if="row.result == 2">
                      试验数据无效
                    </div>
                    <div class="result" v-if="row.result == -1">实测</div>
                  </template>
                </vxe-column>
                <vxe-column field="dataSource" title="数据来源" min-width="150">
                  <template #default="{ row }">
                    <div v-if="row.dataSource == 0">手动录入</div>
                    <div v-if="row.dataSource == 1">物联网数据</div>
                  </template>
                </vxe-column>
                <vxe-column
                  field="operate"
                  width="120"
                  title="操作"
                  fixed="right"
                >
                  <template #default="{ row }">
                    <div class="text-button-group">
                      <a-button
                        type="link"
                        v-if="row.state != -1"
                        @click="
                          voidVisible = true;
                          voidType = 1;
                          id = row.id;
                        "
                        >作废</a-button
                      >
                      <a-button
                        type="link"
                        v-if="row.state == -1"
                        @click="
                          voidVisible = true;
                          voidType = 2;
                          id = row.id;
                        "
                        >作废详情</a-button
                      >
                    </div>
                  </template>
                </vxe-column>
              </vxe-table>
            </div>
            <vxe-pager
              background
              :current-page.sync="pager.page"
              :page-size.sync="pager.pageSize"
              :total="pager.total"
              :layouts="[
                'PrevPage',
                'JumpNumber',
                'NextPage',
                'Sizes',
                'FullJump',
              ]"
              @page-change="paginationChange"
            >
              <template #left>
                <div class="vxe-pager-left-tip-container">
                  第<span>1</span>到<span
                    >{{ Math.ceil(pager.total / pager.pageSize) }}页 </span
                  >共<span>{{ pager.total }}</span
                  >条记录
                </div>
              </template>
            </vxe-pager>
          </div>
        </div>
      </div>
    </div>
    <detailModel :visible.sync="modalVisible" :id="id"></detailModel>
    <voidModel
      :visible.sync="voidVisible"
      :id="id"
      :voidType="voidType"
    ></voidModel>
  </div>
</template>

<script>
const { assets_host } = require("@/environment/index.js");
import AssociativeSelectGroup from "@/components/wisdom-beam/trial-app/AssociativeSelectGroup";
import bjIcon from "@/components/bj-icon";
import topSelect from "./components/select";
import detailModel from "./components/detail";
import voidModel from "./components/void";
import { notificationTip, addAttributeByKey, getNodeByKey } from "@/utils";
import {
  getAccountList,
  recordListByTenantCode,
  getTestHasDataDate,
} from "@/api/wisdom-beam/trial-app";
export default {
  components: {
    AssociativeSelectGroup,
    topSelect,
    bjIcon,
    detailModel,
    voidModel,
  },
  data() {
    return {
      assets_host: assets_host,
      loading: false,
      activeDate: [],
      selectMap: [
        {
          type: "calendar",
        },
      ],
      conditionsData: {},
      select: {
        precativeNum: "",
        reportNum: "",
        sampleNum: "",
      },
      defaultTime: [],
      tableData: [],
      pager: {
        page: 1,
        pageSize: 10,
        total: 0,
      },

      isOpen: true, //默认展开
      expandedKeys: [],
      autoExpandParent: true,
      checkedKeys: [],
      selectedKeys: [],
      treeData: [],

      trialNum: "",
      parentNum: "",
      lqType: "", //沥青名称

      voidVisible: false,
      voidType: 1, //1编辑 2查看
      modalVisible: false,
      id: "",
    };
  },
  mounted() {
    this.getNodeTreeList();
  },
  methods: {
    //获取根节点树数据
    getNodeTreeList() {
      recordListByTenantCode()
        .then((res) => {
          let filterData = addAttributeByKey(
            null,
            "scopedSlots",
            { icon: "custom" },
            res.data.result,
            "children"
          );
          this.treeData = filterData;
        })
        .catch();
    },
    // 查找一个树多有第一个节点，深度遍历
    getFirstNode(tree) {
      var temp = [];
      var forFn = function (arr) {
        if (arr && arr.length > 0) {
          temp.push(arr[0]);
          if (arr[0].children) {
            forFn(arr[0].children);
          }
        }
      };
      forFn(tree);
      return temp;
    },
    onExpand(expandedKeys) {
      this.expandedKeys = expandedKeys;
      this.autoExpandParent = false;
    },
    //树选择事件
    async onSelect(selectedKeys, { node }) {
      node.onExpand();
      this.selectedKeys = selectedKeys;
      this.trialNum = selectedKeys[0];
      let selectItem = getNodeByKey(
        this.trialNum,
        "trialNum",
        this.treeData,
        "children"
      );
      this.lqType = selectItem.lqType;
      if (
        selectItem &&
        (selectItem.children == null || selectItem.children.length == 0)
      ) {
        this.parentNum = selectItem.parentNum || "";
        this.getTableData(selectItem.trialNum);
      }
    },
    //删除
    handleDelClick(row) {
      let that = this;
      let { id } = row;
      const h = this.$createElement;
      this.$confirm({
        title: "您确定删除所选内容?",
        content: "删除内容后,将无法恢复。",
        okText: "确定",
        okType: "primary",
        cancelText: "取消",
        centered: true,
        icon: () =>
          h("a-icon", {
            props: {
              type: "question-circle",
              theme: "filled",
            },
            style: "color:#FB5A5A",
          }),
        onOk() {
          return new Promise((resolve, reject) => {
            deleteReport(id)
              .then((res) => {
                notificationTip("success", "删除成功!");
                that.getTableData();
                resolve();
              })
              .catch((_) => {
                reject();
                notificationTip("error", "删除失败!");
              });
          });
        },
        onCancel() {},
      });
    },
    //新增委托
    add(type, row) {
      let title = "",
        reportId = "";
      if (type == 1) {
        title = "新增委托";
      } else if (type == 2) {
        title = "详情";
        reportId = row.id;
        this.trialNum = row.trialNum;
      } else if (type == 3) {
        title = "编辑";
        reportId = row.id;
        this.trialNum = row.trialNum;
      }
      this.$router.push({
        name: "testCommissionAdd",
        params: {
          title,
          trialNum: this.trialNum,
          reportId,
          parentNum: this.parentNum,
        },
      });
    },
    //查询有数据的日期列表
    getDateList() {
      let {
        conditionsData: { block },
        defaultTime,
      } = this;
      let {
        form: {
          strengthGrade,
          curingAge,
          kind,
          brand,
          nominalDiameter,
          lqType,
          asphaltNum,
          asphaltLevel,
          weatherRegion,
          temperature,
          mxeType,
          roadLevel,
          trafficType,
          designStrength,
          surface,
        },
        selectData: { result, dataSource },
      } = this.$refs.selectChild;
      getTestHasDataDate({
        orgCode: block,
        category: this.trialNum, //试验类别
        strengthGrade: strengthGrade || "",
        curingAge: curingAge || "",
        kind: kind || "",
        brand: brand || "",
        nominalDiameter: nominalDiameter || "",
        lqType: lqType || "",
        asphaltNum: asphaltNum || "",
        asphaltLevel: asphaltLevel || "",
        weatherRegion: weatherRegion || "",
        temperature: temperature || "",
        mxeType: mxeType || "",
        roadLevel: roadLevel || "",
        trafficType: trafficType || "",
        designStrength: designStrength || "",
        surface: surface || "",
        result: result,
        dataSource: dataSource,
        startTime: defaultTime[0] || "",
        endTime: defaultTime[1] || "",
      })
        .then((res) => {
          let { data } = res;
          this.activeDate = data.result || [];
        })
        .catch((_) => {
          this.activeDate = [];
        });
    },
    //监听分页切换
    paginationChange({ currentPage, pageSize }) {
      this.pager.page = currentPage;
      this.pager.pageSize = pageSize;
      this.getTableData();
    },
    getTableData(trialNum = this.trialNum) {
      this.getDateList();
      let { page, pageSize } = this.pager;
      let {
        conditionsData: { block },
        defaultTime,
      } = this;
      let {
        form: {
          strengthGrade,
          curingAge,
          kind,
          brand,
          nominalDiameter,
          lqType,
          asphaltNum,
          asphaltLevel,
          weatherRegion,
          temperature,
          mxeType,
          roadLevel,
          trafficType,
          designStrength,
          surface,
        },
        selectData: { result, dataSource },
      } = this.$refs.selectChild;
      getAccountList({
        orgCode: block,
        category: trialNum, //试验类别

        strengthGrade: strengthGrade || "",
        curingAge: curingAge || "",
        kind: kind || "",
        brand: brand || "",
        nominalDiameter: nominalDiameter || "",
        lqType: lqType || "",
        asphaltNum: asphaltNum || "",
        asphaltLevel: asphaltLevel || "",
        weatherRegion: weatherRegion || "",
        temperature: temperature || "",
        mxeType: mxeType || "",
        roadLevel: roadLevel || "",
        trafficType: trafficType || "",
        designStrength: designStrength || "",
        surface: surface || "",

        result: result,
        dataSource: dataSource,
        startTime: defaultTime[0] || "",
        endTime: defaultTime[1] || "",
        page,
        pageSize,
      })
        .then((res) => {
          let {
            data: { result },
          } = res;
          this.tableData = result.records || [];
          this.pager.total = result.total;
        })
        .catch((_) => {
          this.tableData = [];
        });
    },
    selectGroupChange(data) {
      this.dealConditionsData(data);
      this.getTableData();
    },
    //处理搜索区域选中值
    dealConditionsData(data = {}) {
      Object.keys(data).forEach((key) => {
        if (!data[key]) {
          this.conditionsData[key] = "";
        } else if (Array.isArray(data[key])) {
          this.conditionsData[key] = data[key]
            .map((v) => v.key)
            .filter((v) => v)
            .toString();
        } else if (
          Object.prototype.toString.call(data[key]) === "[object Object]"
        ) {
          this.conditionsData[key] = data[key].key;
        } else {
          this.conditionsData[key] = "";
        }
      });
    },
  },
};
</script>

<style lang="less" scoped>
.test-account-container {
  padding: 0 0 10px 10px;
  height: 100%;
  .flex();
  flex-direction: column;
  .test-account-body {
    flex: 1;
    overflow: hidden;
    margin: 10px 10px 0 0;
    .data-report-body {
      width: 100%;
      height: 100%;
      .flex();
      .test-menu {
        width: 304px;
        height: 100%;
        background: #fff;
        padding: 0px 15px 20px;
        box-sizing: border-box;
        .flex();
        flex-direction: column;
        position: relative;
        transition: 0.8s;
        margin-right: 12px;
        .zhgd-data-report-header {
          padding: 12px 0;
          &::before {
            content: attr(header);
            height: 18px;
            display: flex;
            align-items: center;
            border-left: 3px solid var(--primary-color);
            padding-left: 10px;
            margin-bottom: 20px;
            font-size: 18px;
            font-weight: 400;
            color: #525a5d;
            position: relative;
            top: 10px;
          }
          .video-menu-icon {
            font-size: 22px;
            color: var(--primary-color);
            position: relative;
            top: 2px;
          }
        }
        .video-menu-tree {
        }
        .arrow {
          position: absolute;
          top: 50%;
          right: -8px;
          cursor: pointer;
        }
        &.animate-in {
          left: 0;
          width: 304px;
          padding: 0px 15px 20px;
        }
        &.animate-out {
          left: -12px;
          width: 0px;
          margin-right: 0;
          padding: 0 6px;
          /deep/.ant-tree li {
            padding-left: 12px;
          }
          .zhgd-data-report-header {
            &::before {
              padding-left: 20px;
            }
          }
        }
      }
      .table-body {
        flex: 1;
        background: #fff;
        margin-left: 2px;
        overflow: hidden;
        .flex();
        flex-direction: column;
        z-index: 99;
        .zhgd-data-report-header {
          padding: 22px 27px 22px 20px;
        }
        .table-warp-body {
          flex: 1;
          .flex();
          flex-direction: column;
          .table-body {
            flex: 1;
            .result-ok {
              color: #4bc964;
            }
            .result-no {
              color: #ff3f4a;
            }
            .result-invalid {
              color: #0098ff;
            }
          }
        }
      }
    }
  }
}
</style>
